//
//  ProfileDetailView.swift
//  HeroAnimation
//
//  Created by qingzhou on 2021/5/13.
//

import SwiftUI

struct ProfileDetailView: View {
    var animation: Namespace.ID
    @GestureState var offset: CGFloat = 0
    @EnvironmentObject var profileData: ProfileDetailModel
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            if profileData.selectedProfile != nil {
                
                if profileData.showEnlargePic {
                    Image(profileData.selectedProfile.profile)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .matchedGeometryEffect(id: profileData.selectedProfile.id, in: animation)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .offset(y: profileData.offset)
                        
                        .gesture(DragGesture().updating($offset, body: { (value, out, _) in
                            out = value.translation.height
                            
                        }).onEnded({ (value) in
                            let offset = profileData.offset > 0 ? profileData.offset : -profileData.offset
                            withAnimation() {
                                if offset > 200 {
                                    profileData.showEnlargePic.toggle()
                                    profileData.showProfile.toggle()
                                    profileData.selectedProfile = nil
                                }
                                
                                profileData.offset = 0
                            }
                        }))
                        
                        .background(
                            Color.black
                                .opacity(getOpaity())
                                .ignoresSafeArea()
                        )
                    
                    HStack() {
                        Button(action: {
                            withAnimation() {
                                profileData.showEnlargePic.toggle()
                                profileData.showProfile.toggle()
                                profileData.selectedProfile = nil
                            }
                        }) {
                            Image(systemName: "arrow.left")
                                .font(.title)
                                .foregroundColor(.white)
                        }
                        
                        
                        Text(profileData.selectedProfile.userName)
                            .font(.title)
                            .foregroundColor(.white)
                        Spacer()
                    }
                    .padding()
                    
                } else {
                    Button(action:{
                        withAnimation() {
                            profileData.showEnlargePic.toggle()
                        }
                    }) {
                        Image(profileData.selectedProfile.profile)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .matchedGeometryEffect(id: profileData.selectedProfile.id, in: animation)
                            .frame(maxWidth: 300)
                            .overlay(
                                TitleView(profileData: profileData)
                                , alignment: .topLeading
                            )
                    }
                    .buttonStyle(PlainButtonStyle())
                    .overlay(
                        ButtonsAction()
                            .offset(y: 50)
                            .padding(.horizontal, 60)
                        ,alignment: .bottom
                    )
                    .frame(width: 300, height: 300)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(
                        Color.black
                            .opacity(0.35)
                            .ignoresSafeArea()
                            .onTapGesture{
                                withAnimation() {
                                    profileData.showProfile.toggle()
                                    profileData.selectedProfile = nil
                                }
                            }
                    )
                }
            }
            
        }
        .onChange(of: offset, perform: { value in
            profileData.offset = offset
        })
    }
    func getOpaity() -> Double {
        let offset = profileData.offset > 0 ? profileData.offset : -profileData.offset
        let progress = offset / 200
        return 1 - Double(progress)
    }
}

struct ProfileDetailView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            
    }
}

struct TitleView:View {
    var profileData: ProfileDetailModel
    var body: some View {
        Text(profileData.selectedProfile.userName)
            .font(.title2)
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(
                Color.black
                    .opacity(0.35)
            )
    }
}

struct ButtonsAction: View {
    var body: some View {
        HStack {
            Button(action:{
            }) {
                Image(systemName: "message.fill")
                    .font(.title2)
                    .foregroundColor(.green)
            }
            
            Spacer()
            Button(action:{}) {
                Image(systemName: "info.circle.fill")
                    .font(.title2)
                    .foregroundColor(.green)
            }
            
        }
        .padding(.horizontal, 60)
        .frame(width: 300, height: 50)
        .background(Color.white)
    }
}
